<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
      
       
        const TaskConxtex = React.createContext({
            tasks:[],
            addTask:()=>{},
            deleteTask:()=>{}
        })

        const {Provider,Consumer} = TaskConxtex

        //根组件
        class App extends React.Component {

            // constructor(){
            //     super()
            //     this.state={
            //         tasks: [],
            //         addTask:this.addTask,
            //         deleteTask:this.deleteTask
            //     }
            // }

            addTask =(task)=>{ //00ff11
                if(!task) return 
                const {tasks} = this.state
                tasks.unshift(task)

                this.setState({
                    tasks
                })
            }

            deleteTask = (index)=>{ //00ff22
                const { tasks } = this.state

                //数组删除  [{1},{2},{3},{4}]
                tasks.splice(index, 1)

                this.setState({
                    tasks
                })
            }

            // this.addTask出现 undefined 场景：1）调整顺寻 2)constructor
            state = {
                tasks: [],
                addTask:this.addTask,
                deleteTask:this.deleteTask
            }

            render() {
                return (
                    <Provider value={this.state}>
                        <div>
                            <h1> Today Tasks : {this.state.tasks.length}</h1>
                            <AddTask />
                            <TasksList />
                        </div>
                    </Provider>
                )
            }
        }
 

        

         //添加
         class AddTask extends React.Component {
              state = {task:''} 
            //   this.context =  {state}
              static contextType  = TaskConxtex

              // 同步任务内容
              handleChange = (e) => {
                this.setState({
                    task: e.target.value
                })
             }

             // 添加任务
             handleAddTask = () => {
                const {addTask} = this.context

                const { task} = this.state
                if (!task)return

                //添加数据 : 同步到state  00ff11
                let taskNew = { task: task, date: new Date().toLocaleDateString() }
                addTask(taskNew)

                //视图优化
                this.setState({
                    task: '' //清空输入
                })
            }

            render() {

                // render  和  setState 出现死循环 场景; 直接关联 
                return (
                    <div>
                        <input type='text'  value={this.state.task} onChange={this.handleChange}/>
                        {/*1)addTask 直接使用Consumer + ()=>{} 2) addTask 直接使用Consumer + this.handleAddTask.bind(this,addTask)*/}
                        {/*<Consumer >
                            {
                                ({addTask})=>{
                                    return (
                                        <button onClick={()=>{
                                            const { task} = this.state
                                             if (!task)return

                                            //添加数据 : 同步到state  00ff11
                                            let taskNew = { task: task, date: new Date().toLocaleDateString() }
                                            addTask(taskNew)

                                            //视图优化
                                            this.setState({
                                                task: '' //清空输入
                                            })
                                        }}>add task</button>
                                    )
                                }
                            }
                        </Consumer>*/}

                        {/*02) */}
                        <button onClick={this.handleAddTask}>add task</button>
                        
                    </div>
                )
            }
        }

        //列表
        function TasksList() {
            return (
                <div>
                    <ul>     
                        <Consumer >
                            {
                                ({tasks})=>{
                                    
                                    return (
                                        tasks.map((item,index)=>{
                                            return <TaskItem  key={index} item={item} index={index} />
                                        })
                                    )
                                }
                            }
                        </Consumer>
                    </ul>
                </div>
            )
        }

        //列表item
        function TaskItem(props) {
            const {item,index} = props
            const {task,date} = item
            
            return (
                <li >
                    <span>{index+1}-{task}--{date}</span>{' '}
                    <Consumer>
                        {
                            ({deleteTask})=>{
                               return  (
                                <button onClick={()=>{
                                    deleteTask(index)
                                }}>delete</button>
                               )
                            }
                        }
                    </Consumer>
                    
                </li>
            )
        }

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>